<template>
  <div class="collection-smart-alerts" v-if="alertItems.length > 0">
    <el-alert
      v-for="alert in alertItems"
      :key="alert.id"
      :title="alert.title"
      :type="alert.type"
      :closable="alert.closable"
      show-icon
      @close="handleAlertClose(alert)"
    >
      <template #default>
        <div class="alert-content">
          <span>{{ alert.content }}</span>
          <el-button
            v-if="alert.actionText"
            link
            type="primary"
            @click="handleAlertAction(alert)"
          >
            {{ alert.actionText }}
          </el-button>
        </div>
      </template>
    </el-alert>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { ElMessage } from 'element-plus'

interface CollectionRecord {
  id: string
  orderInfo: {
    platformOrderId: string
    amount: number
    orderDate: string
  }
  customerInfo: {
    name: string
    contactPerson: string
    phone: string
    email: string
  }
  collectionInfo: {
    collectionId: string
    method: string
    duration: number
    result: string
    collectionTime: string
    operator: string
    notes: string
    isBatch: boolean
    nextFollowupDate: string
    satisfactionScore: number
  }
}

interface AlertItem {
  id: string
  title: string
  content: string
  type: 'success' | 'warning' | 'info' | 'error'
  closable: boolean
  actionText?: string
  data?: any
}

interface Props {
  records: CollectionRecord[]
}

const props = defineProps<Props>()

const emit = defineEmits<{
  (e: 'alert-click', alert: AlertItem): void
}>()

const alertItems = computed(() => {
  const alerts: AlertItem[] = []
  
  // 检查是否有即将到期的催款记录
  const upcomingFollowups = props.records.filter(record => {
    if (!record.collectionInfo.nextFollowupDate) return false
    const followupDate = new Date(record.collectionInfo.nextFollowupDate)
    const now = new Date()
    const diffTime = followupDate.getTime() - now.getTime()
    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
    return diffDays <= 3 && diffDays >= 0
  })
  
  if (upcomingFollowups.length > 0) {
    alerts.push({
      id: 'upcoming-followups',
      title: '即将到期提醒',
      content: `有 ${upcomingFollowups.length} 条催款记录需要在3天内跟进`,
      type: 'warning',
      closable: true,
      actionText: '立即处理',
      data: upcomingFollowups
    })
  }
  
  // 检查是否有逾期的催款记录
  const overdueRecords = props.records.filter(record => {
    if (!record.collectionInfo.nextFollowupDate) return false
    const followupDate = new Date(record.collectionInfo.nextFollowupDate)
    const now = new Date()
    return followupDate < now
  })
  
  if (overdueRecords.length > 0) {
    alerts.push({
      id: 'overdue-records',
      title: '逾期提醒',
      content: `有 ${overdueRecords.length} 条催款记录已逾期，请及时处理`,
      type: 'error',
      closable: true,
      actionText: '立即处理',
      data: overdueRecords
    })
  }
  
  // 检查是否有低满意度的催款记录
  const lowSatisfactionRecords = props.records.filter(record => {
    return record.collectionInfo.satisfactionScore <= 2
  })
  
  if (lowSatisfactionRecords.length > 0) {
    alerts.push({
      id: 'low-satisfaction',
      title: '满意度提醒',
      content: `有 ${lowSatisfactionRecords.length} 条催款记录客户满意度较低`,
      type: 'info',
      closable: true,
      actionText: '查看详情',
      data: lowSatisfactionRecords
    })
  }
  
  return alerts
})

const handleAlertClose = (alert: AlertItem) => {
  // 处理提醒关闭
  ElMessage.info(`提醒 ${alert.title} 已关闭`)
}

const handleAlertAction = (alert: AlertItem) => {
  // 处理提醒操作
  emit('alert-click', alert)
}
</script>

<style scoped lang="scss">
.collection-smart-alerts {
  margin-bottom: 20px;
  
  .alert-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>